blob: 10f625a9b6dfcb503f546f85cc38526c1c2d2968 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
import AppBar from "@/components/layouts/AppBar";
import Layout from "@/components/layouts/Layout";
import LineDivider from "@/components/elements/LineDivider";
import WithAuth from "@/components/auth/WithAuth";
import { useEffect, useState } from "react";
import apiOdoo from "@/core/utils/apiOdoo";
import { useRouter } from "next/router";
import { useAuth } from "@/core/utils/auth";
import VariantCard from "@/components/variants/VariantCard";
import currencyFormat from "@/core/utils/currencyFormat";
import Disclosure from "@/components/elements/Disclosure";
import DescriptionRow from "@/components/elements/DescriptionRow";
import { SkeletonList } from "@/components/elements/Skeleton";
export default function DetailInvoice() {
const router = useRouter();
const { id } = router.query;
const [ auth ] = useAuth();
const [ invoice, setInvoice ] = useState(null);
useEffect(() => {
if (auth && id) {
const loadInvoice = async () => {
const dataInvoice = await apiOdoo('GET', `/api/v1/partner/${auth?.partner_id}/invoice/${id}`);
setInvoice(dataInvoice);
}
loadInvoice();
}
}, [ auth, id ]);
const Customer = () => {
const customer = invoice?.customer;
const fullAddress = [];
if (customer?.street) fullAddress.push(customer.street);
if (customer?.sub_district?.name) fullAddress.push(customer.sub_district.name);
if (customer?.district?.name) fullAddress.push(customer.district.name);
if (customer?.city?.name) fullAddress.push(customer.city.name);
return (
<div className="p-4 pt-0 flex flex-col gap-y-4">
<DescriptionRow label="Nama">{ invoice?.customer?.name }</DescriptionRow>
<DescriptionRow label="Email">{ invoice?.customer?.email || '-' }</DescriptionRow>
<DescriptionRow label="No Telepon">{ invoice?.customer?.mobile || '-' }</DescriptionRow>
<DescriptionRow label="Alamat">{ fullAddress.join(', ') }</DescriptionRow>
</div>
);
};
const downloadTaxInvoice = () => {
window.open(`${process.env.ODOO_HOST}/api/v1/download/tax-invoice/${invoice.id}/${invoice.token}`, 'Download')
}
const downloadInvoice = () => {
window.open(`${process.env.ODOO_HOST}/api/v1/download/invoice/${invoice.id}/${invoice.token}`, 'Download')
}
return (
<WithAuth>
<Layout className="pb-4">
<AppBar title="Detail Invoice" />
{ invoice ? (
<>
<div className="p-4 flex flex-col gap-y-4">
<DescriptionRow label="No Invoice">
{ invoice?.name }
</DescriptionRow>
<DescriptionRow label="Status Transaksi">
{ invoice?.amount_residual > 0 ? (
<span className="badge-solid-red">Belum Lunas</span>
) : (
<span className="badge-solid-green">Lunas</span>
) }
</DescriptionRow>
<DescriptionRow label="Purchase Order">
{ invoice?.purchase_order_name || '-' }
</DescriptionRow>
<DescriptionRow label="Ketentuan Pembayaran">
{ invoice?.payment_term }
</DescriptionRow>
{ invoice?.amount_residual > 0 && invoice.invoice_date != invoice.invoice_date_due && (
<DescriptionRow label="Tanggal Jatuh Tempo">
{ invoice?.invoice_date_due }
</DescriptionRow>
) }
<DescriptionRow label="Nama Sales">
{ invoice?.sales }
</DescriptionRow>
<DescriptionRow label="Tanggal Invoice">
{ invoice?.invoice_date }
</DescriptionRow>
<div className="flex items-center">
<p className="text-gray_r-11 leading-none">Faktur Pembelian</p>
<button
type="button"
className="btn-light py-1.5 px-3 ml-auto"
onClick={downloadInvoice}
>
Download
</button>
</div>
<div className="flex items-center">
<p className="text-gray_r-11 leading-none">Faktur Pajak</p>
<button
type="button"
className="btn-light py-1.5 px-3 ml-auto"
onClick={downloadTaxInvoice}
disabled={invoice.efaktur ? false : true}
>
Download
</button>
</div>
</div>
<LineDivider />
<Disclosure
label="Detail Penagihan"
/>
<Customer />
<LineDivider />
<Disclosure
label="Detail Produk"
/>
<div className="mt-2 p-4 pt-0 flex flex-col gap-y-3">
{ invoice?.products?.map((product, index) => (
<VariantCard
key={index}
data={product}
buyMore
/>
)) }
<div className="flex justify-between mt-3 font-medium">
<p className="text-gray_r-11">Total Belanja</p>
<p>{ currencyFormat(invoice?.amount_total || 0) }</p>
</div>
</div>
</>
) : (
<div className="p-4 py-6">
<SkeletonList number={12} />
</div>
) }
</Layout>
</WithAuth>
);
}
|
